<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="no-referrer" name="referrer">
    <title>获取指定网站的图片</title>
    <link href="/viewer.min.css" rel="stylesheet" type="text/css">
    <link href="/iconfont.css" rel="stylesheet" type="text/css">
    <link href="/index.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="app" v-cloak :class="{full:isFullScreen}">
        <div class="ops" :class="{full:isFullScreen, top:isTop}" @mouseleave="isTop=false" ref="ops">
            <span v-title="'参数设置'" class="icon-set iconfont" @click="m_set_visible=true"></span>
            <span>布局<i v-title="'图片布局方式'">?</i></span><select v-model="layoutR" @keydown.prevent><option v-for="k in layoutListR" :value="k.value">{{k.name}}</option></select><select v-model="layoutC" @keydown.prevent><option v-for="k in layoutListC" :value="k.value">{{k.name}}</option></select>
            <span>图片网址<i v-title="'如果开启了采集指定网址，将支持数字和字母范围写法,比如[1-90]和[a-z]范围写法不能出现空格且字母只支持单个不支持[aa-zz]，这对于采集连续性的网址很有用，多个地址用英文逗号隔开'">?</i></span><input type="text" v-model.trim="url" @click="selAll" @keydown.stop>
            <span v-if="ready">
                <button key="1" @click="start" v-if="!disabled&&!m_edit">开始</button>
                <span v-if="disabled" class="loading"></span>
                <button key="2" v-if="disabled" @click="stop" :disabled="m_stop" :class="{disabled:m_stop}">停止</button>
                <button key="3" @click="clear" v-if="!disabled&&!m_edit"><span class="icon-load iconfont"></span>删除/加载</button>
                <button key="4" v-title="'按图片的大小排序'" @click="sort"><span class="icon-sort iconfont"></span>大小</button>
                <button key="5" v-title="'按采集图片的时间排序'" @click="sortByTime"><span class="icon-sort iconfont"></span>时间</button>
                <button key="6" v-title="'按采集来源网址排序可以让图片内容更连贯'" @click="sortBySource"><span class="icon-sort iconfont"></span>来源</button>
                <button key="7" @click="m_edit=!m_edit"><span class="iconfont icon-edit"></span>{{!m_edit?'编辑':'退出编辑'}}</button>
                <button key="8" @click="delSelImage" v-if="m_edit"><span class="iconfont icon-delete"></span>删除图片</button>
                <button key="9" @click="selsImage" v-if="m_edit">全选</button>
                <button key="10" @click="fullScreen"><span class="icon-fullscreen iconfont"></span>{{isFullScreen?'退出全屏':'全屏'}}</button>
                <a href="/logs" target="_blank" title="最近1000条错误日志">日志</a>
            </span>
            <span v-else>{{errMes}}</span>
        </div>
        <transition name="slide">
            <div class="set-dlg" v-if="m_set_visible">
                <div class="set-dlg-bg" @click="m_set_visible=false"></div>
                <div class="set-dlg-container" @keydown.stop>
                    <div class="set-item">
                        <span>采集指定网址<i v-title="'开启这个功能，将只会采集输入网址下的图片，多个网址英文逗号隔开，关闭这个功能，将采集这个网址下同域名的所有网址的图片，只支持输入一个网址且如果网址会发生跳转导致域名不一致的时候是不会采集的'">?</i></span><select v-model="only" @keydown.prevent><option v-for="k in pageContent" :value="k.value">{{k.name}}</option></select>
                    </div>
                    <div class="set-item">
                        <span>图片下载进程<i v-title="'适当提高数值，会提升抓取效率，不是越高越好'">?</i></span><input type="text" v-model.number="process" @click="selAll">
                    </div>
                    <div class="set-item">
                        <span>抓取间隔(ms)<i v-title="'有些网站可能做了频率检测，适当设置间隔时间，可以规避'">?</i></span><input type="text" v-model.number="delay" @click="selAll">
                    </div>
                    <div class="set-item">
                        <span>图片大于(KB)<i v-title="'过滤掉小于指定大小的图片'">?</i></span><input type="text" style="width:40px;" v-model.number="size" @click="selAll">
                    </div>
                    <div class="set-item">
                        <span>指定属性<i v-title="'有些网站的图片地址可能没有放在img标签的src属性上，所以需要指定一个属性'">?</i></span><input type="text" v-model.trim="prop" @click="selAll">
                    </div>
                    <div class="set-item">
                        <span>分页<i v-title="'当图片很多的时候会影响性能，所以建议开启分页'">?</i></span><select v-model="pager" @keydown.prevent><option v-for="k in pageContent" :value="k.value">{{k.name}}</option></select>
                    </div>
                    <div class="set-item">
                        <span>引用<i v-title="'有些网站需要，有些网站不需要，可以尝试开启或关闭后再试'">?</i></span><select v-model="referer" @keydown.prevent><option v-for="k in pageContent" :value="k.value">{{k.name}}</select>
                    </div>
                    <div class="set-item">
                        <span>设置Cookie<i v-title="'有些网站需要验证cookie，才能正常访问'">?</i></span><input type="text" v-model.trim="cookie" @click="selAll">
                    </div>
                    <div class="set-item">
                        <span>请求超时(ms)<i v-title="'连接到网站的时间，超时中断连接'">?</i></span><input type="text" v-model.number="reqTimeout" @click="selAll">
                    </div>
                    <div class="set-item">
                        <span>响应超时(ms)<i v-title="'获取网站数据的时间，超时中断连接'">?</i></span><input type="text" v-model.number="resTimeout" @click="selAll">
                    </div>
                    <div class="set-item">
                        <span>超时重连次数<i v-title="'超时重连次数'">?</i></span><input type="text" v-model.number="retry" @click="selAll">
                    </div>
                </div>
            </div>
        </transition>
        <div class="img" v-viewer ref="viewer">
            <div v-for="(k,i) in arr" :style="{width: width}">
                <div v-for="p in k" class="img-inner">
                    <img :src="p.imgUrl">
                    <a :href="p.sUrl" target="_blank" @click.stop>{{formatSize(p.size)}}</a>
                    <div v-if="m_edit" class="edit" @click.stop="editAll(p.id)" :class="{active:selEdit[p.id]}">
                        <span @click.stop="dels(p.id)" class="iconfont icon-delete"></span>
                    </div>
                </div>
            </div>
        </div>
        <transition name="slide">
            <div class="dle-dlg-wrap" v-if="delVisible">
                <div class="del-dlg-bg"></div>
                <div class="dle-dlg" @click.stop>
                    <div class="item">
                        <div><input type="checkbox" v-model="m_sel_all" @click="selectAll"></div>
                        <div>文件夹</div>
                        <div>图片数量</div>
                    </div>
                    <div class="dle-container" v-if="dirList.length">
                        <div class="item" v-for="k in dirList">
                            <div><input type="checkbox" :checked="sels[k.id]" @click="selectRow($event,k.id)"></div>
                            <div>{{k.dir}}</div>
                            <div>{{k.num}}</div>
                        </div>
                    </div>
                    <div v-else>当前没有可删除的图片，只先采集</div>
                    <div class="dle-btns" v-if="dirList.length">
                        <button @click="delImage">仅删除图片</button>
                        <button @click="delImageAndDir">删除图片和文件夹</button>
                        <button @click="loadImage">加载图片</button>
                    </div>
                </div>
            </div>
        </transition>
        <div class="page" :class="{full:isFullScreen, top:isBottom}" @mouseleave="isBottom=false" v-if="list.length">
            <span v-for="(k,i) in pageList" @click="pageTo(k,i)" :class="{active:page===k}">{{k}}</span>
            <span class="total">共{{list.length}}个</span>
        </div>
        <transition name="fade">
            <div class="req-loading" v-if="loadingVisible">
                <svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg>
            </div>
        </transition>
    </div>
    <script src="/vue.min.js" type="text/javascript"></script>
    <script src="/viewer.min.js" type="text/javascript"></script>
    <script src="/v-viewer.min.js" type="text/javascript"></script>
    <script src="/component.js" type="text/javascript"></script>
    <script src="/index.js" type="text/javascript"></script>
</body>
</html>